<template>
    <div class="previewTopology">
        <a-modal
            v-model:open="open"
            :title="title"
            width="100%"
            wrapClassName="previewTopology"
            :footer="null"
            @cancel="handleCancel"
            :destroyOnClose="true"
        >
            <div class="app-page">
                <div id="previewMeta2d"></div>
            </div>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
    import { ref, nextTick } from 'vue';
    import { flowPens, flowAnchors } from "@meta2d/flow-diagram";
    import { activityDiagram, activityDiagramByCtx } from "@meta2d/activity-diagram";
    import { classPens } from "@meta2d/class-diagram";
    import { sequencePens, sequencePensbyCtx } from "@meta2d/sequence-diagram";
    import { formPens } from "@meta2d/form-diagram";
    import { ftaPens, ftaPensbyCtx, ftaAnchors } from "@meta2d/fta-diagram";
    import { Meta2d, Pen, register, registerAnchors, registerCanvasDraw } from '@meta2d/core';
    import { useSelection } from '@/services/selections';
    const { select } = useSelection();

    const open = ref(false);
    const title = ref<string>('预览组态');
    let previewMeta2d: Meta2d | null = null

    const showModal = async (record: any) => {
        open.value = true;
        
        // 等待模态框完全打开和 DOM 渲染完成
        await nextTick();
        
        // 检查元素是否存在
        const container = document.getElementById('previewMeta2d');
        if (!container) {
            console.error('previewMeta2d container not found');
            return;
        }

        // 如果已存在实例，先销毁
        if (previewMeta2d) {
            previewMeta2d.destroy();
            previewMeta2d = null;
        }

        const meta2dOptions: any = {
            background: "transparent",
        };
        meta2dOptions["rule"] = false;
        
        try {
            previewMeta2d = new Meta2d("previewMeta2d", meta2dOptions);

            // 按需注册图形库
            register(flowPens());
            registerAnchors(flowAnchors());
            register(activityDiagram());
            registerCanvasDraw(activityDiagramByCtx());
            register(classPens());
            register(sequencePens());
            registerCanvasDraw(sequencePensbyCtx());
            registerCanvasDraw(formPens());
            register(ftaPens());
            registerCanvasDraw(ftaPensbyCtx());
            registerAnchors(ftaAnchors());

            // 读取本地存储
            let data: any = JSON.parse(record.jsonContent);
            if (data) {
                if (!data.locked) {
                    data["locked"] = 0;
                }
                previewMeta2d.open(data);
            }
            previewMeta2d.on("active", active);
            previewMeta2d.on("inactive", inactive);
        } catch (error) {
            console.error('Failed to initialize Meta2d:', error);
        }
    }

    function active(pens?: Pen[]) {
        select(pens);
    }

    function inactive() {
        select();
    }

    const handleCancel = () => {
        if (previewMeta2d) {
            previewMeta2d.destroy();
            previewMeta2d = null;
        }
       open.value = false;
    }

     defineExpose({ showModal });
</script>

<style lang="scss">
.previewTopology {
    .ant-modal {
        max-width: 100%;
        position: relative;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }
    .ant-modal-header {
        margin-bottom: 0;
    }
    .ant-modal-close {
        position: absolute;
        top: 10px;
    }
    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
        padding: 10px 0 0 0;
        .ant-modal-header,
        .ant-modal-footer {
            padding: 0 20px;
        }
    }
    .ant-modal-body {
        flex: 1;
        .app-page {
            height: 100vh;
            #previewMeta2d {
                position: relative;
                width: 100%;
                height: 100%;
            }
        }
    }
}

</style>
